
*{
    box-sizing: border-box;
}

.clearfix:after{
    content: '';
    display: block;
    clear: both;
}
.fl {
    float: left;
}
.fr {
    float: right;
}

html,body{
    height: 100%;
    font-size: 13.333vw;
}

@fontSize: 50rem;

body{  
    background-color: #f8f9fa;
    font-family: '微软雅黑 Light';
    width: 375./@fontSize;
    
}

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
    .header{

        width: 100%;
        height: 90./@fontSize;
        background-color: #19be7a;
        font-size: 18./@fontSize;
        text-align: center;
        line-height: 90./@fontSize;
        a{
            color: #ffffff;
        }
    }
    .main{
        flex: 1;
        background-color: #f8f9fa;
        font-size: 16./@fontSize;
        overflow-x: hidden;
        overflow-y: auto;
        line-height: 55./@fontSize;
        color: #999999;
        .content{
            background-color: #ffffff;
            .messager{
                width: 315./@fontSize;
                margin: auto;
                border-bottom: 1./@fontSize solid #e8e8e8;
          
                img {
                    margin:  0 15./@fontSize;
                   
                }
                
               
            }
            div:nth-child(4){
                color: #333333;
                
                .arrow {
                    float: right;
                    margin-right: 15./@fontSize;
                    margin-top: 20./@fontSize;
                }
            }
            .messager2{
                height: 110./@fontSize;
                margin-left: 80./@fontSize;
              
            }
        }
       
    }
    .footer{
        width: 100%;
        height: 90./@fontSize;;
        background-color: #19be7a;
        font-size: 18./@fontSize;
        color: #ffffff;
        text-align: center;
        line-height: 90./@fontSize;
        a{
            color: #ffffff;
            text-align: center;
        }
    
    }
}